<!--https://blog.csdn.net/qq_41862017/article/details/83030318
https://www.cnblogs.com/wenqiangit/p/10538871.html
https://juejin.cn/post/6844904082361024526-->
<template>
  <div style="margin-top: 300px">
    <el-form>
      <el-upload ref="uploadscan" action="http://baidu.com" :multiple="false" :pic-width="250" :pic-height="90"
                 :auto-upload="false" :limit="1" :http-request="requestFile">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
      <el-input v-model="filedata.title" label="请输入视频标题"></el-input>
    </el-form>
    <el-button @click="submit" color="primary">提交</el-button>

    <ul>
      <li>
        <el-select v-model="value" placeholder="请选择" size="mini" style="margin-right: 20px;width: 120px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
    </ul>

    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
      </div>
    </el-upload>
    <!-- 小图显示可以用这个 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {post} from "../api/http"
  import axios from 'axios';

  export default {
    name: "test",
    data() {
      return {
        filedata: {},
      }
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      submit() {
        // 表单校验
        this.$refs.uploadscan.submit();
      },
      requestFile(param) {
        // const {...params} = this.filedata;
        // this.$qs.stringify(params)

        let uploadUrl = "/item/filedata/upload";
        let form = new FormData()    // FormData 对象
        form.append('videoFile', param.file)    // 文件对象
        form.append('title', this.filedata.title)  //表单其他参数。。
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        axios.post(uploadUrl, form, config).then(function (result) {
          console.log(result);
        })
      }
    },
  }
</script>

<style scoped>

</style>
